<template>
	<view @click="clickSearch">
		<wd-search disabled :hide-cancel="true" />
	</view>
	<view class="categoryList flex  w-full bg-white my-1">
		<view @click="toList(item._id)" v-for="item in categories"
			class="categoryIem  flex flex-col w-80px h-100px bg-white justify-center items-center">
			<img rounded-full w-60px h-60px border-1 border-solid :src="item.categoryImgs[0]" />
			<text class="mt-1">{{item.categoryName}}</text>
		</view>
	</view>
	<view class="spuList flex justify-between flex-wrap">
		<view @click="toDetail(item)" class="supItem  rounded-2 bg-white mb-1" v-for="item in spus">
			<img class="w-full" :src="item.spuImgs[0]" />
			<view class="px-2 py-1">
				<text class="line-clamp-2 font-bold">{{item.spuName}}</text>
				<text class="line-clamp-2 text-grey-500 my-1">{{item.spuDescription}}</text>
				<text class="font-bold text-#1677ff">
					<text class="text-sm">￥</text>
					<text class="text-lg ">{{getPrice(item)}}</text>
				</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getProductCategories,
		getSpus
	} from '../../api/product';

	const clickSearch = () => {
		uni.navigateTo({
			url: '/pages/searchGoods/searchGoods'
		})
	}
	const categories = ref([]);
	getProductCategories().then(res => {
		categories.value = res.data.list;
	});
	const spus = ref([]);
	getSpus().then(res => {
		spus.value = res.data.list;
	});

	const getPrice = (item) => {
		const priceList = item.skus.map((item) => {
			return item.price
		})
		return item.skus?.length > 0 ? Math.min(...priceList) :'未知';
	}
	const toList = (id) => {
		uni.navigateTo({
			url: `/pages/searchGoods/searchGoods?categoryId=${id}`
		})
	}
	 
	 const toDetail = (item) => {
		uni.navigateTo({
			url: `/pages/goodsDetail/goodsDetail?id=${item._id}`
			
		})
	}
	
</script>

<style scoped>
	.supItem {
		width: calc(50% - 3px);
	}
</style>